<template>
  <div class="dynamicallyEditCss_container">
    <h3>动态修改样式</h3>
    <div class="main">
      <h3>通过style</h3>
      <span :style="{ color: color }">文字</span>
      <el-button @click="getColor">切换文字颜色</el-button>
    </div>
    <div class="main">
      <h3>scss+style</h3>
      <span class="textColor">文字</span>
      <el-button @click="switchColor">切换文字颜色</el-button>
    </div>
     <h3>动态修改伪类的名称</h3>
    <div class="main">
        <h3>js+标签属性+scss的attr</h3>
        <div class="box" data-text="默认文字"></div>
        <el-button @click="switchAfterName">切换伪类名称</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, nextTick } from "vue";
import { getRandomColor } from "@/utils";
const color = ref("");
getColor();
function getColor() {
  color.value = getRandomColor();
}
nextTick(() => { 
    switchColor();
})
function switchColor() {
  const container = document.querySelector(".dynamicallyEditCss_container");
  if (container) {
    container.style.setProperty("--base-color", getRandomColor());
  }
}
function switchAfterName() { 
    const boxAfter = document.querySelector('.box');
    if (boxAfter) { 
        boxAfter.setAttribute('data-text',getRandomColor())
    }
}
</script>
<style lang="scss" scoped>
$base-color: var(--base-color, #000);
.dynamicallyEditCss_container {
  @include flex(flex-start, stretch, column, 20px);
  .main {
    margin: 0 10px;
    min-height: 100px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    @include flex(flex-start, flex-start, column, 10px);
  }
  .textColor {
    color: $base-color;
  }
  .box{
    &::after{
        content: attr(data-text);
    }
  }
}
</style>
